import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'dva'
import { Divider, Modal, message } from 'antd'
import styles from './style.less'
import { GQL } from '../../../components/GQL/index'
import gql from 'graphql-tag'

const Todo = ({ title, record, delDepartment, refetch, dispatch }) => {
  function confirm ({ id }, del, refetch) {
    Modal.confirm({
      title: '系统提示',
      content: '确定删除该部门信息?',
      okText: '确认',
      cancelText: '取消',
      onOk () {
        del({ variables: { id } }).then(({ data: { delDepartment } }) => {
          const { status } = delDepartment
          if (status === 'fail') {
            message.error(delDepartment.message)
            return
          }
          message.success(delDepartment.message)
          refetch()
        }).catch(err => {
          console.log(err)
        })
      }
    })
  }
  return (
    <div className={styles.todo}>
      <div>{title}</div>
      <div>
        <a onClick={() => dispatch({ type: 'departmentManager/save', payload: { visible: true, departs: {} } })}>新增子部门</a>
        <Divider type='vertical' />
        <a onClick={() => dispatch({ type: 'departmentManager/save', payload: { visible: true, departs: record } })}>编辑</a>
        <Divider type='vertical' />
        <a onClick={() => confirm(record, delDepartment, refetch)}>删除</a>
      </div>
    </div>
  )
}

Todo.propTypes = {
  title: PropTypes.string.isRequired,
  record: PropTypes.object,
  delDepartment: PropTypes.func,
  refetch: PropTypes.func,
  dispatch: PropTypes.func
}
const mapStateToProps = ({ departmentManager }) => ({ departmentManager })
export default GQL({
  mutation: gql`
    mutation delDepartment($id: Int!){
      delDepartment(id:$id){
        status
        message
      }
    }
  `,
  name: 'delDepartment'
})(connect(mapStateToProps)(Todo))
